<template>
  <div class="micro-service-box">
    <div class="previewStyle" :style="{background: formData.bgColor,marginTop: formData.marginTop/2 + 'px',marginBottom: formData.marginBottom/2 + 'px'}">
       <span class="noticeIcon" :class="formData.checkedIcon" :style="{color: formData.tColor}"></span>
       <span :style="{color: formData.tColor}">{{formData.content}}</span>
    </div>
    <div v-show="isShowEdit" class="design-editor-item design-hide-class">
      <el-scrollbar wrap-class="scroll-content">
        <div class="rightWrap">
            <div class="design-editor-component-title">在线客服</div>
            <el-tabs v-model="tabActive" tab-position="top">
              <el-tab-pane label="内容设置" name="0">
                <div class="groupItemWrap">
                  <el-form label-width="60px">
                    <el-form-item label="图标：">
                      <div class="dis al_item">
                        <div class="iconItem dis dis_ju al_item" :class="[iconsIndex == iconIndex? 'activeIcon':'']" @click="checkedIcons(iconIndex)" v-for="(iconItem,iconIndex) in iconArr" :key="iconIndex">
                          <span class="iconText" :class="[iconItem]"></span>
                          <img  v-show="iconsIndex == iconIndex" class="activeBox" src="@/assets/common/noticeCheckIcon.png" />
                        </div>
                      </div>
                    </el-form-item>
                    <el-form-item label="文字：">
                      <el-input class="contentInp" v-model="formData.content" size="mini" maxlength="20" show-word-limit/>
                    </el-form-item>
                    <el-form-item label="链接：">
                      <div v-if="formData.microTitle&&formData.title" class="dis al_item">
                        <span class="typeName">{{ formData.microTitle }}</span>
                        <span class="microTitle">{{ formData.title }}</span>
                        <span class="cursor modifyBtn microTitle" @click="checkedLink">修改</span>
                      </div>
                      <div v-else class="dis al_item linkBox" @click="checkedLink">
                        <span class="linkText">请选择跳转链接</span>
                        <span class="el-icon-arrow-right rightIcon"></span>
                      </div>
                    </el-form-item>
                  </el-form>
                </div>
              </el-tab-pane>
              <el-tab-pane label="样式设置" name="1">
                <div class="styleWrap">
                  <div class="titleStyle">内容样式</div>
                  <div>
                    <div class="dis dis_ju_spb al_item w100e item_mar">
                      <div class="dis al_item">
                        <span>文字颜色</span>
                        <span class="text_mar">{{ formData.tColor }}</span>
                      </div>
                      <div class="dis al_item">
                        <div class="resetText" @click="resetBoderColor(1)">重置</div>
                        <el-color-picker
                          v-model="formData.tColor"
                          :show-alpha="false"
                          color-format="hex"
                          size="mini"
                        />
                      </div>
                    </div>
                    <div class="dis dis_ju_spb al_item w100e item_mar">
                      <div class="dis al_item">
                        <span>背景颜色</span>
                        <span class="text_mar">{{ formData.bgColor }}</span>
                      </div>
                      <div class="dis al_item">
                        <div class="resetText" @click="resetBoderColor(2)">重置</div>
                        <el-color-picker
                          v-model="formData.bgColor"
                          :show-alpha="false"
                          color-format="hex"
                          size="mini"
                        />
                      </div>
                    </div>
                  </div>
                </div>
                <div class="styleWrap">
                  <div class="titleStyle">
                    组件样式
                  </div>
                  <div class="dis al_item dis_ju_spb w100e item_mar">
                    <div class="dis al_item">
                      <span>上边距</span>
                      <span class="text_mar">{{ formData.marginTop }}px</span>
                    </div>
                    <el-radio-group v-model="formData.marginTop" size="small">
                      <el-radio-button label="0">小</el-radio-button>
                      <el-radio-button label="15">中</el-radio-button>
                      <el-radio-button label="30">大</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="dis al_item dis_ju_spb w100e item_mar">
                    <div class="dis al_item">
                      <span>下边距</span>
                      <span class="text_mar">{{ formData.marginBottom }}px</span>
                    </div>
                    <el-radio-group v-model="formData.marginBottom" size="small">
                      <el-radio-button label="0">小</el-radio-button>
                      <el-radio-button label="15">中</el-radio-button>
                      <el-radio-button label="30">大</el-radio-button>
                    </el-radio-group>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-scrollbar>
    </div>
    <!--选择微页面-->
    <el-dialog
      custom-class="up-dialog"
      :close-on-click-modal="false"
      top="5vh"
      title="微页面"
      :visible.sync="dialogChoosePages"
      width="42%"
    >
      <div class="choose-goods-compent">
        <choose-feature
          :is-get-choose-data="isGetChooseFeature"
          @chooseChooseFeaturesFun="chooseChooseFeaturesFun"
        />
        <div slot="footer" style="text-align: right;margin-top: 20px;">
          <el-button size="mini" type="primary" @click="isGetChooseFeature=!isGetChooseFeature">确定</el-button>
          <el-button size="mini" @click="dialogChoosePages = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import index from './index.js'

export default index
</script>
